import { useState, useMemo, useEffect } from 'react';
import { Checkbox, Switch } from 'antd';
import PopoverComponent from './PopoverComponent';
import MultilingualInput from '../../.././../../MultilingualInput';
import '../style.less';

export default function Assign(props) {
    const { value, onChange, form } = props;
    const [popoverVisible, setPopoverVisible] = useState(false);
    const [isReturnToDesignator, setSsReturnToDesignator] = useState<boolean>(false);

    const buttonItem = useMemo(() => {
        return value?.find((item) => item?.action == 'assign');
    }, [value]);

    const onCheckChange = (e: { target: { checked: boolean; }; }) => {
        const _value = value?.map((item) => {
            if (item?.action == 'assign') {
                return {
                    ...item,
                    enable: e?.target?.checked,
                }
            } else {
                return item;
            };
        });
        onChange(_value);
    };

    const onTextChange = () => {
        const _value = value?.map((item) => {
            if (item?.action == 'assign') {
                return {
                    ...item,
                    enable: !buttonItem?.enable,
                }
            } else {
                return item;
            };
        });
        onChange(_value);
    };

    const onInputChange = (val: string) => {
        const _value = value?.map((item) => {
            if (item?.action == 'assign') {
                return {
                    ...item,
                    name: val,
                }
            } else {
                return item;
            };
        });
        onChange(_value);
    };

    const onIsReturnToDesignatorCheckChange = (checked: boolean) => {
        setSsReturnToDesignator(checked);
        const _buttonSetting = form?.getFieldsValue()?.buttonSetting;
        form?.setFieldValue('buttonSetting', {
            ..._buttonSetting,
            isReturnToDesignator: checked,
        });
    };

    useEffect(() => {
        const _buttonSetting = form?.getFieldsValue()?.buttonSetting;
        setSsReturnToDesignator(_buttonSetting?.isReturnToDesignator ?? false);
    }, [form?.getFieldsValue()?.buttonSetting]);

    return (
        <>
            <div className='process-designer-button'>
                <Checkbox checked={buttonItem?.enable} onChange={onCheckChange} />
                <div className='process-designer-button-text' onClick={onTextChange} title='指派'>指派</div>
                {
                    buttonItem?.enable
                    &&
                    <>
                        <MultilingualInput value={buttonItem?.name} onChange={onInputChange} />
                        <PopoverComponent
                            popoverVisible={popoverVisible}
                            setPopoverVisible={setPopoverVisible}
                            value={value}
                            onChange={onChange}
                            type='assign'
                        />
                    </>
                }
            </div>
            {
                buttonItem?.enable
                &&
                <div className='process-designer-button-config'>
                    <div className='process-designer-button-config-assign'>
                        <div className='process-designer-button-config-assign-text' title='退回指派人'>退回指派人</div>
                        <Switch checked={isReturnToDesignator} onChange={onIsReturnToDesignatorCheckChange} />
                    </div>
                </div>
            }
        </>
    )
}